<template>
  <div class="companyTarget" v-loading="loading">
    <div class="title">
      <div class="text-16px font-bold">{{ title }}</div>
      <div>
        <span class="color-#20a0ff text-20px font-bold">{{
          data.targetValue
        }}</span>
        万
      </div>
    </div>
    <div class="flex justify-center my-20px">
      <el-progress
        type="circle"
        :percentage="Number(data.percent)"
        :stroke-width="15"
        :color="props.name === 'person' ? '#13ce66' : '#20a0ff'"
      >
        <template #default="{ percentage }">
          <div class="percentage-label mb-10px text-13px">完成率</div>
          <div
            class="percentage-value font-bold"
            :class="name === 'person' ? 'color-#13ce66' : 'color-#20a0ff'"
          >
            {{ percentage }}%
          </div>
        </template>
      </el-progress>
    </div>
    <div class="footer">
      已完成目标:
      <span class="mount"> {{ data.mount }} </span>
      万
    </div>
  </div>
</template>

<script setup>
import { annualTarget } from '@/api/system/user'
const props = defineProps({
  name: {
    type: String,
    default: () => {}
  }
})

const title = ref('公司年度经营目标')
const data = reactive({
  targetValue: 0,
  percent: 0,
  mount: 0
})
const loading = ref(false)
function initData(res) {
  console.log(res, 'annualTarget')
  if (props.name === 'person') {
    title.value = '个人年度销售目标'
    data.targetValue = (res.data.personalTargetValue / 10000).toFixed(2)
    data.mount = (res.data.personalSaleMount / 10000).toFixed(2)
    data.percent = ((data.mount / data.targetValue) * 100 || 0).toFixed(2)
  } else if (props.name === 'company') {
    data.targetValue = (res.data.companyTargetValue / 10000).toFixed(2)
    data.mount = (res.data.companySaleMount / 10000).toFixed(2)
    data.percent = (
      (res.data.companySaleMount / res.data.companyTargetValue) * 100 || 0
    ).toFixed(2)
  }
}

async function getData() {
  loading.value = true
  annualTarget()
    .then(initData)
    .finally(() => {
      loading.value = false
    })
}
getData()
</script>

<style scoped lang="scss">
.companyTarget {
  height: 100%;
  width: 100%;
  padding: 20px;
  border-radius: 10px;
  // border-top-right-radius: 10px;
  // border-top-left-radius: 10px;
  // box-shadow: 0px 0px 6px 0px rgb(220, 206, 206);
  border: 1px solid rgba(223, 220, 220, 0.8);
  font-size: 14px;
  margin-bottom: 20px;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .mount {
    @apply color-#e6a23c text-20px font-bold;
    &:before {
      content: '';
      border: 3px white solid;
    }
    &::after {
      content: '';
      border: 3px white solid;
    }
  }
}
</style>
